<template>
  <div>
    <el-table
      v-loading="isloading"
      :data="data"
      element-loading-text="加载中请稍后"
      border
      fit
      highlight-current-row>
      <el-table-column
        v-for="(item, index) in header"
        :key="index"
        :align="item.align"
        :label="item.label"
        :width="item.width">
        <template slot-scope="scope">
          <!--日期类-->
          <Item
            v-if="item.type === 'Date'"
            :type="item.type"
            :rowname="item.rowName"
            :scope="scope.row[item.rowName] | formatDate"
          />
          <!--文本类-->
          <Item
            v-else-if="item.type === 'Text'"
            :type="item.type"
            :rowname="item.rowName"
            :scope="scope.row[item.rowName]"
          />
          <!--操作类-->
          <Item
            v-else-if="item.type === 'Operate'"
            :type="item.type"
            :rowname="item.rowName"
            :scope="scope[item.rowName]"
            :operate="item.operate"
            :permission-data-in="permissionDataIn"
            :permission-show-in="permissionShowIn"
            @submit="submit"
          />
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import Item from './item.vue'
import signUp from './config/signUp'

export default {
  name: 'TableView',
  components: { Item },
  props: {
    isloading: {
      type: Boolean,
      required: true
    },
    data: {
      type: Array,
      required: true
    },
    permissionData: {
      type: Array,
      required: true
    },
    permissionShow: {
      type: Boolean,
      required: true
    }
  },
  data() {
    return {
      header: [],
      permissionDataIn: [],
      permissionShowIn: false
    }
  },
  watch: {
    'permissionData'(val) {
      this.permissionDataIn = val
    },
    'permissionShow'(val) {
      this.permissionShowIn = val
    }
  },
  mounted() {
    this.header = signUp;
  },
  methods: {
    submit(index, type) {
      this.$emit('submit', index, type)
    }
  }
}
</script>
<style>

</style>

